<template>
    <div class="about">
        <ul @click="handlerClick">
            <li v-for="item in ulList" :key="item.id" :data-li="item.id">
                <p>
                    <span>{{ item.title }}</span>
                    <span> ----- </span>
                    <span>{{ item.date }}</span>
                </p>
            </li>
        </ul>
    </div>
</template>
<script>
// import { post } from "../api/request";
// let url = "/books/";
export default {
    name: 'HelloWorld',
    data() {
        return {
            ulList: [
                {
                    id: 11111,
                    age: 18,
                    title: '大伟聊前端1',
                    date: new Date().toLocaleString()
                },
                {
                    id: 111112,
                    age: 18,
                    title: '大伟聊前端2',
                    date: new Date().toLocaleString()
                },
                {
                    id: 11113,
                    age: 18,
                    title: '大伟聊前端3',
                    date: new Date().toLocaleString()
                }
            ]
        };
    },
    props: {
        msg: String
    },
    methods: {
        handlerClick: function (e) {
            // console.log(e.target.parentElement.parentElement);
            console.log(e.target, e.currentTarget);
        }
    },
    created() {
        // post(url).then((res) => {
        //     console.log(res?.data?.subjects);
        // });
    }
};
</script>
<style lang="less" scoped>
li {
    margin: 10px;
    span {
        display: inline-block;
    }
    p {
        pointer-events: none;
        span:first-child {
            color: red;
        }
    }
}
</style>
